<template>
	<!-- 助学中心 -->
	<view class="zhuxue">
		<!-- 顶部导航 -->
		<view class="navbar">
			<view :class="currentIndex == index ? 'active' : ''" v-for="(item,index) in navbar" :key="index" @click="changeIndex(index)">{{item}}</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<!-- 参与的 -->
			<view class="list" v-if="currentIndex == 0">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png"></image>
						<view class="right">
							<text class="title">艺粤文化培训中心钢琴特色体验课火热招生中</text>
						</view>
					</view>
					<view class="money">
						<view class="price">
							目标金额：<text>￥5000</text>
						</view>
						<view class="state">助学已退还</view>
					</view>
				</view>
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png"></image>
						<view class="right">
							<text class="title">艺粤文化培训中心钢琴特色体验课火热招生中</text>
							<view class="right-money">
								<view class="right-price">
									目标金额：<text>￥5000</text>
								</view>
								<view class="support">无私支持&gt;</view>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="price">
							目标金额：<text>￥5000</text>
						</view>
						<view class="state">助学已退还</view>
					</view>
				</view>
			</view>
			<!-- 支持的 -->
			<view class="list" v-if="currentIndex == 1">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png"></image>
						<view class="right">
							<text class="title">艺粤文化培训中心钢琴特色体验课火热招生中</text>
							<view class="right-money">
								<view class="right-price">
									目标金额：<text>￥5000</text>
								</view>
								<view class="support">无私支持&gt;</view>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="order-state">
							订单状态：付款成功
						</view>
						<view class="state">助学进行中</view>
					</view>
				</view>
			</view>
			<!-- 发起的 -->
			<view class="list" v-if="currentIndex == 2">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png"></image>
						<view class="right">
							<text class="title">艺粤文化培训中心钢琴特色体验课火热招生中</text>
						</view>
					</view>
					<view class="money">
						<view class="price">
							目标金额：<text>￥5000</text>
						</view>
						<view class="state">助学已退还</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbar:["我参与的","我支持的","我发起的"],
				currentIndex: 0
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
		.zhuxue {
			.navbar {
				background-color: #FFFFFF;
				display: flex;
				height: rpx(41);
				line-height: rpx(41);
				border-bottom: 1px solid #ddd;
				text-align: center;
				font-size: rpx(14);
				view {
					position: relative;
					flex: 1;
					&.active::after {
						content: "";
						display: block;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: rpx(60);
						height: rpx(3);
						background-color: #4bdac3;
					}
				}
			}
		}
		.list {
			.list-item {
				margin: rpx($uni-margin-top) rpx($uni-margin-left);
				background-color: #fff;
				border: 1px solid #ddd;
				.date {
					height: rpx(30);
					line-height: rpx(30);
					margin: 0 rpx(13);
					font-size: rpx(13);
					color: #888;
				}
				.content {
					border-top: 1px solid #ddd;
					padding: rpx(10) rpx(13);
					display: flex;
					image {
						flex-shrink: 0;
						width: rpx(151);
						height: rpx(80);
					}
					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: rpx(10);
						padding: rpx(5) 0;
						.title {
							font-size: rpx(14);
							line-height: 1.6;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.right-money {
							display: flex;
							justify-content: space-between;
							font-size: rpx(14);
							.right-price {
								text {
									color: red;
								}
							}
							.support {
								color: #aaa;
							}
						}
					}
				}
				.money {
					border-top: 1px solid #ddd;
					height: rpx(40);
					line-height: rpx(40);
					display: flex;
					padding: 0 rpx(13);
					font-size: rpx(14);
					justify-content: space-between;
					.price {
						text {
							color: red;
						}
					}
					.state {
						color: #42c8b2;
					}
					.order-state {
						color: #888;
					}
				}
			}
		}
	}
</style>
